<script setup lang="ts">
// 引入 Vue 的相关函数和 Element Plus 的图标组件
import {
  ComponentInternalInstance,
  defineEmits,
  defineProps,
  getCurrentInstance,
} from "vue";
import {CircleClose} from "@element-plus/icons-vue";

// 获取当前组件实例的 appContext 配置，提取 globalProperties
const {
  appContext: {
    app: {
      config: {globalProperties},
    },
  },
} = getCurrentInstance() as ComponentInternalInstance;

// 定义组件的 props 类型
interface Props {
  modelValue: string; // 用于绑定和传递选中的图标名称
}

// 使用 defineProps 来定义 props
const props = defineProps<Props>();

// 定义一个事件 emit，用来更新 modelValue
const emits = defineEmits(["update:modelValue"]);

/** 清空选中的图标 */
function closeIcon() {
  // 触发 update:modelValue 事件，清空选中的图标值
  emits("update:modelValue", "");
}
</script>

<template>
  <!-- 使用 el-popover 组件，点击时弹出图标选择器 -->
  <el-popover trigger="click" :width="500">
    <!-- 用作弹出框的触发元素 -->
    <template #reference>
      <!-- el-button 组件，显示当前选择的图标 -->
      <el-button class="click-button" :icon="props.modelValue">
        <!-- 显示当前选中的图标名称 -->
        {{ props.modelValue }}
        <!-- 如果 modelValue 为空，显示提示信息 -->
        <p v-if="!modelValue" class="button-placeholder">点击选择图标</p>
        <!-- 如果有选中的图标，显示关闭图标（清空图标的按钮） -->
        <el-icon @click.stop="closeIcon" v-if="modelValue" class="close-icon">
          <!-- 使用 CircleClose 图标作为关闭按钮 -->
          <CircleClose />
        </el-icon>
      </el-button>
    </template>

    <!-- 图标选择区域，包含所有可选图标 -->
    <div class="el-icon-picker">
      <!-- 循环遍历所有可用图标，并生成图标组件 -->
      <!-- 遍历 globalProperties.$icons 中的所有图标 -->
      <!--:class="[icon, 'icon', { 'icon-active': icon == props.modelValue }]" 动态绑定类名，标记当前选中的图标 -->
      <!-- :is="icon" 动态渲染图标组件 -->
      <!--@click="emits('update:modelValue', icon)" 选择图标时，更新 modelValue -->
      <component
          v-for="icon in globalProperties.$icons"
          :key="icon"
          :class="[icon, 'icon', { 'icon-active': icon == props.modelValue }]"
          :is="icon"
          @click="emits('update:modelValue', icon)"
      >
      </component>
    </div>
  </el-popover>
</template>

<style scoped lang="scss">
/* 图标选择器的样式 */
.el-icon-picker {
  height: 256px; /* 设置选择器的高度 */
  overflow-y: scroll; /* 使图标列表可滚动 */
  display: flex; /* 使用 Flexbox 布局 */
  flex-wrap: wrap; /* 支持换行 */
}

/* 每个图标的样式 */
.icon {
  display: inline-block; /* 使图标为行内块元素 */
  width: 24px; /* 图标的宽度 */
  height: 24px; /* 图标的高度 */
  color: var(--el-text-color-regular); /* 默认颜色 */
  font-size: 20px; /* 字体大小 */
  border-radius: 4px; /* 边框圆角 */
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
  text-align: center; /* 图标居中对齐 */
  line-height: 45px; /* 行高，使图标垂直居中 */
  margin: 5px; /* 图标间距 */
}

/* 图标悬停时的样式 */
.icon:hover {
  color: var(--el-color-primary); /* 悬停时变更颜色 */
}

/* 当前选中图标的样式 */
.icon-active {
  color: var(--el-color-primary); /* 选中图标时的颜色 */
}

/* el-button 按钮的样式 */
.click-button {
  width: 100%; /* 按钮宽度填充父容器 */
  position: relative; /* 设置相对定位，以便放置关闭图标 */
}

/* 使用 ::v-deep 让样式作用到 Element Plus 的 el-button */
::v-deep .el-button {
  justify-content: flex-start !important; /* 让按钮内容左对齐 */
}

/* 当 modelValue 为空时显示的占位提示 */
.button-placeholder {
  position: absolute; /* 使用绝对定位 */
  display: block;
  left: 10px; /* 距离左边10px */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 精确居中 */
  color: #a8abc3; /* 设置提示文本的颜色 */
}

/* 关闭图标的样式 */
.close-icon {
  position: absolute; /* 使用绝对定位 */
  right: 10px; /* 距离右边10px */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 精确居中 */
}

/* el-button 的聚焦和悬停状态样式 */
.el-button:focus,
.el-button:hover {
  background: #fff; /* 悬停时背景颜色为白色 */
}
</style>
